<template>

  <div>
    <el-drawer
      :wrapperClosable="false"
      v-if="true"
      :title="title"
      :visible.sync="open"
      direction="rtl"
    >
      <el-container>
        <el-main>
          <!--        配置名称 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="300px" style="margin-bottom: 80px">
            <el-form-item label="模板名称" label-position="left" label-width="110px" prop="name">
              <el-input v-model="form.name" placeholder="请输入模板名称"/>
            </el-form-item>
            <!--          通知类型-->
            <el-form-item label="通知类型" label-position="left" label-width="110px" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择通知类型"
                :disabled="this.typeVisible"
                @change="changeType"
                class="select-width">
                <el-option
                  v-for="dict in dict.type.notify_config_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <!--          服务商-->
            <el-form-item label="服务商" label-position="left" label-width="110px" prop="provider">
              <el-select v-model="form.provider" class="select-width">
                <el-option
                  v-for="(item) in this.providerData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!--          应用ID -->
            <el-form-item
              v-if="agentIdVisible"
              label="应用ID"
              label-position="left"
              label-width="110px"
              prop="template.agentId">
              <el-input v-model="form.template.agentId"/>
            </el-form-item>

            <!--          收信人ID -->
            <el-form-item
              v-if="userIdListVisible"
              label="收信人ID"
              label-position="left"
              label-width="110px"
              prop="template.userIdList">
              <el-input v-model="form.template.userIdList"/>
            </el-form-item>

            <!--          收信部门ID -->
            <el-form-item
              v-if="departmentIdListVisible"
              label="收信部门ID"
              label-position="left"
              label-width="110px"
              prop="template.departmentIdList">
              <el-input v-model="form.template.departmentIdList"/>
            </el-form-item>

            <!--          全部用户 -->
            <el-form-item
              v-if="toAllUserVisible"
              label="全部用户"
              prop="template.toAllUser"
              label-position="left"
              label-width="110px">
              <el-radio-group v-model="form.template.toAllUser">
                <el-radio
                  v-for="dict in dict.type.notify_template_alluser"
                  :key="dict.value" :label="dict.value"
                >{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--          收信人ID -->
            <el-form-item
              v-if="toUserVisible"
              label="收信人ID"
              label-position="left"
              label-width="110px"
              prop="template.toUser">
              <el-input v-model="form.template.toUser"/>
            </el-form-item>

            <!--          收信部门ID -->
            <el-form-item
              v-if="toPartyVisible"
              label="收信部门ID"
              label-position="left"
              label-width="110px"
              prop="template.toParty">
              <el-input v-model="form.template.toParty"/>
            </el-form-item>

            <!--          按标签推送 -->
            <el-form-item
              v-if="toTagVisible"
              label="按标签推送"
              label-position="left"
              label-width="110px"
              prop="template.toTag">
              <el-input v-model="form.template.toTag"/>
            </el-form-item>

            <!--          内容 -->
            <el-form-item
              v-if="messageVisible"
              label="内容"
              label-position="left"
              label-width="110px"
              prop="template.message">
              <el-input v-model="form.template.message" :rows="4" type="textarea"/>
            </el-form-item>

            <!--          模板ID -->
            <el-form-item
              v-if="ttsCodeVisible"
              label="模板ID"
              label-position="left"
              label-width="110px"
              prop="template.ttsCode">
              <el-input v-model="form.template.ttsCode"/>
            </el-form-item>

            <!--          被叫显号 -->
            <el-form-item
              v-if="calledShowNumbersVisible"
              label="被叫显号"
              label-position="left"
              label-width="110px"
              prop="template.calledShowNumbers">
              <el-input v-model="form.template.calledShowNumbers"/>
            </el-form-item>

            <!--          被叫号码 -->
            <el-form-item
              v-if="CalledNumberVisible"
              label="被叫号码"
              label-position="left"
              label-width="110px"
              prop="template.CalledNumber">
              <el-input v-model="form.template.CalledNumber"/>
            </el-form-item>

            <!--          播放次数 -->
            <el-form-item
              v-if="PlayTimesVisible"
              label="播放次数"
              label-position="left"
              label-width="110px"
              prop="template.PlayTimes">
              <el-input v-model="form.template.PlayTimes"/>
            </el-form-item>

            <!--          模板编码 -->
            <el-form-item
              v-if="codeVisible"
              label="模板编码"
              label-position="left"
              label-width="110px"
              prop="template.code">
              <el-input v-model="form.template.code" placeholder="阿里云短信模板编码"/>
            </el-form-item>

            <!--          签名 -->
            <el-form-item
              v-if="signNameVisible"
              label="签名"
              label-position="left"
              label-width="110px"
              prop="template.signName">
              <el-input v-model="form.template.signName" placeholder="阿里云短信模板签名"/>
            </el-form-item>

            <!--          收件人 -->
            <el-form-item
              v-if="phoneNumberVisible"
              label="收件人"
              label-position="left"
              label-width="110px"
              prop="template.phoneNumber">
              <el-input v-model="form.template.phoneNumber" placeholder="短信接收者，暂只支持单个联系人"/>
            </el-form-item>

            <!--          标题 -->
            <el-form-item
              v-if="subjectVisible"
              label="标题"
              label-position="left"
              label-width="110px"
              prop="template.subject">
              <el-input v-model="form.template.subject"/>
            </el-form-item>

            <!--          收件人 -->
            <el-form-item
              v-if="sendToVisible"
              label="收件人"
              label-position="left"
              label-width="110px"
              prop="template.sendTo">

              <el-input v-model="form.template.sendTo" :rows="4" type="textarea" placeholder="多个收件人以 ，(英文) 分隔"/>

            </el-form-item>

            <!--          附件 -->
            <el-form-item
              v-if="sendToVisible"
              label="附件"
              label-position="left"
              label-width="110px"
              prop="template.attachments">
              <el-upload
                ref="imgUpload"
                :http-request="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :action="fileUrl"
                :file-list="form.template.attachments"
                multiple>
                <el-button type="primary">上传图片</el-button>
              </el-upload>
            </el-form-item>

            <!--          正文 -->
            <el-form-item
              v-if="textVisible"
              label="正文"
              label-position="left"
              label-width="110px"
              prop="template.text">
              <editor
                v-model="form.template.text"
                theme="chrome"
                class="editorText"
                :options="editorOptions"
              />
            </el-form-item>


          </el-form>

        </el-main>

        <el-footer>
          <div class="bottom-bar" style="text-align: right">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-footer>

      </el-container>
    </el-drawer>


  </div>

</template>


<script>
import {mapState} from 'vuex'
import {getTemplate, addTemplate, updateTemplate, upload} from "@/api/notify/template";
import {getProvider} from '@/api/notify/config';


export default {
  name: 'NotifyConfigAddEdit',
  dicts: ['notify_config_type', 'notify_template_alluser'],
  components: {},
  data() {

    return {
      // 弹出层标题
      title: "",
      // 弹出层标题
      titleConfig: "",
      // 是否显示弹出层
      open: false,
      fileUrl: 'http://localhost:8080/dev-api',
      //判断操作是添加还是修改
      operationType: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictLabel: null,
        dictType: null,
      },
      // 是否显示弹出层
      openConfig: false,
      num: 0,
      // 表单参数
      form: {
        template: {
          agentId: '',
          userIdList: '',
          departmentIdList: '',
          toAllUser: '',
          toUser: '',
          toParty: '',
          toTag: '',
          ttsCode: '',
          calledShowNumbers: '',
          CalledNumber: '',
          PlayTimes: '',
          sendTo: '',
        },
      },
      // 服务商数据
      providerData: [],

      // 通知类型 是否禁用
      typeVisible: false,

      // 应用ID输入框默认隐藏
      agentIdVisible: false,
      // 收信人ID输入框默认隐藏
      userIdListVisible: false,
      // 收信部门ID输入框默认隐藏
      departmentIdListVisible: false,
      // 全部用户默认隐藏
      toAllUserVisible: false,
      // 内容默认隐藏
      messageVisible: false,


      // 模板ID默认隐藏
      ttsCodeVisible: false,
      // 被叫显号输入框默认隐藏
      calledShowNumbersVisible: false,
      // 被叫号码默认隐藏
      CalledNumberVisible: false,
      // 播放次数默认隐藏
      PlayTimesVisible: false,


      // 收信人ID默认隐藏
      toUserVisible: false,
      // 收信部门ID默认隐藏
      toPartyVisible: false,
      // 按标签推送 默认隐藏
      toTagVisible: false,

      //模板编码 默认隐藏
      codeVisible: false,
      //签名 默认隐藏
      signNameVisible: false,
      //收件人  默认隐藏
      phoneNumberVisible: false,

      //标题 默认隐藏
      subjectVisible: false,
      //收件人 默认隐藏
      sendToVisible: false,
      //正文 默认隐藏
      textVisible: false,


      // 表单校验
      rules: {

        name: [
          {required: true, message: "通知配置名称不能为空", trigger: "blur"}
        ],
        type: [
          {required: true, message: "通知类型不能为空", trigger: "blur"}
        ],
        provider: [
          {required: true, message: "服务商不能为空", trigger: "blur"}
        ],

        template: {
          message: [
            {required: true, message: "内容不能为空", trigger: "change"}
          ],
          code: [
            {required: true, message: "模板编码不能为空", trigger: "change"}
          ],
          signName: [
            {required: true, message: "签名不能为空", trigger: "change"}
          ],
          phoneNumber: [
            {required: true, message: "收件人不能为空", trigger: "change"}
          ],
          sendTo: [
            {required: true, message: "收件人不能为空", trigger: "change"}
          ],

        },


      },

      // 代码编辑器配置
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false //去除编辑器里的竖线
      },

    };
  },
  computed: {
    ...mapState({
      templateData: state => state.template.templateData,
    }),
  },

  watch: {
    'form.type'(type) {
      this.form.type = type;
    },
    'form.provider'(provider) {
      this.visibleByTemplate(this.form.type, provider);
    },


  },

  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        type: null,
        template: {},
        description: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 取消按钮操作 */
    cancel() {
      this.open = false;
      this.reset();
    },


    /** 上传图片触发事件 */
    handlePreview(file) {
      let param = new FormData();
      param.append("file", file.file);
      let oneFile = {
        location: '',
        uid: file.file.uid,
        lastModified: file.file.lastModified,
        name: file.file.name,
        size: file.file.size,
        type: file.file.type,
      }
      upload(param).then(response => {
        oneFile.location = response.url
      })
      if (this.form.template.attachments[0] === undefined) {
        //说明要增加的第一个
        this.form.template.attachments[0] = oneFile;
      } else {
        this.form.template.attachments.push(oneFile);
      }
    },

    /** 移除图片 */
    handleRemove(file) {
      let attachments = this.form.template.attachments;
      let index = 0;
      for (let i = 0; i < attachments.length; i++) {
        if (file.uid === attachments[i].uid) {
          index = i;
        }
      }
      this.form.template.attachments.splice(index, 1);
    },

    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    /** 新增按钮操作 */
    handleAddTemplate() {
      this.reset();
      this.operationType = this.operationType + 1;
      this.typeVisible = false;
      this.open = true;
      this.title = "添加通知模板";

    },

    /** 根据通知类型获取服务商 */
    changeType() {
      this.queryParams.type = this.form.type;
      getProvider(this.queryParams).then(response => {
        this.providerData = response.data;
        if (this.operationType !== 0) {
          //说明是添加操作
          this.form.template = {};
          if (this.form.type === 'email') {
            this.form.template.attachments = [];
          }

        }
        this.$forceUpdate();
      })
    },


    /** 修改按钮操作 */
    handleUpdate(id) {
      //回显
      getTemplate(id).then(response => {
        let data = response.data;
        data.template = JSON.parse(data.template)
        this.form = data;
        if (this.form.type === 'email') {
          this.form.template.sendTo = data.template.sendTo.join(',');
        }
        this.changeType();
        this.operationType = 0;
        this.typeVisible = true;
        this.open = true;
        this.title = "修改通知模板";
      });

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        let form = JSON.parse(JSON.stringify(this.form))
        form.template = JSON.stringify(form.template);
        if (valid) {
          if (this.form.id != null) {
            updateTemplate(form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$store.commit("TEMPLATE_DATA", JSON.parse(JSON.stringify(this.form)));

            });
          } else {
            addTemplate(form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$store.commit("TEMPLATE_DATA", JSON.parse(JSON.stringify(this.form)));
            });
          }
        }
      });

    },


    /**
     * 根据通知类型显示隐藏表单
     * @param type 通知类型
     */
    visibleByTemplate(type, provider) {
      if (!type) {

        // 隐藏 应用ID
        this.agentIdVisible = false;
        // 隐藏 收信人ID
        this.userIdListVisible = false;
        // 隐藏 收信部门ID
        this.departmentIdListVisible = false;
        // 隐藏 全部用户
        this.toAllUserVisible = false;
        // 隐藏 内容
        this.messageVisible = false;

        // 隐藏 模板ID
        this.ttsCodeVisible = false;
        // 隐藏 被叫显号
        this.calledShowNumbersVisible = false;
        // 隐藏 被叫号码
        this.CalledNumberVisible = false;
        // 隐藏 播放次数
        this.PlayTimesVisible = false;


        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;

        // 隐藏 模板编码
        this.codeVisible = false;
        // 隐藏 签名
        this.signNameVisible = false;
        // 隐藏 收件人
        this.phoneNumberVisible = false;

        //隐藏 标题
        this.subjectVisible = false;
        //隐藏 收件人
        this.sendToVisible = false;
        //隐藏 正文
        this.textVisible = false;


      } else if (type === 'dingTalk' && provider === 'dingTalkMessage') {

        // 显示 应用ID
        this.agentIdVisible = true;
        // 显示 收信人ID
        this.userIdListVisible = true;
        // 显示 收信部门ID
        this.departmentIdListVisible = true;
        // 显示 全部用户
        this.toAllUserVisible = true;
        // 显示 内容
        this.messageVisible = true;


        // 隐藏 模板ID
        this.ttsCodeVisible = false;
        // 隐藏 被叫显号
        this.calledShowNumbersVisible = false;
        // 隐藏 被叫号码
        this.CalledNumberVisible = false;
        // 隐藏 播放次数
        this.PlayTimesVisible = false;
        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;
        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;
        // 隐藏 模板编码
        this.codeVisible = false;
        // 隐藏 签名
        this.signNameVisible = false;
        // 隐藏 收件人
        this.phoneNumberVisible = false;
        //隐藏 标题
        this.subjectVisible = false;
        //隐藏 收件人
        this.sendToVisible = false;
        //隐藏 正文
        this.textVisible = false


      } else if (type === 'email' && provider === 'embedded') {
        //显示 标题
        this.subjectVisible = true;
        //显示 收件人
        this.sendToVisible = true;
        //显示 正文
        this.textVisible = true;

        // 隐藏 应用ID
        this.agentIdVisible = false;
        // 隐藏 收信人ID
        this.userIdListVisible = false;
        // 隐藏 收信部门ID
        this.departmentIdListVisible = false;
        // 隐藏 全部用户
        this.toAllUserVisible = false;
        // 隐藏 内容
        this.messageVisible = false;

        // 隐藏 模板ID
        this.ttsCodeVisible = false;
        // 隐藏 被叫显号
        this.calledShowNumbersVisible = false;
        // 隐藏 被叫号码
        this.CalledNumberVisible = false;
        // 隐藏 播放次数
        this.PlayTimesVisible = false;


        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;

        // 隐藏 模板编码
        this.codeVisible = false;
        // 隐藏 签名
        this.signNameVisible = false;
        // 隐藏 收件人
        this.phoneNumberVisible = false;


      } else if (type === 'sms' && provider === 'aliyunSms') {
        // 显示 模板编码
        this.codeVisible = true;
        // 显示 签名
        this.signNameVisible = true;
        // 显示 收件人
        this.phoneNumberVisible = true;

        // 隐藏 应用ID
        this.agentIdVisible = false;
        // 隐藏 收信人ID
        this.userIdListVisible = false;
        // 隐藏 收信部门ID
        this.departmentIdListVisible = false;
        // 隐藏 全部用户
        this.toAllUserVisible = false;
        // 隐藏 内容
        this.messageVisible = false;

        // 隐藏 模板ID
        this.ttsCodeVisible = false;
        // 隐藏 被叫显号
        this.calledShowNumbersVisible = false;
        // 隐藏 被叫号码
        this.CalledNumberVisible = false;
        // 隐藏 播放次数
        this.PlayTimesVisible = false;


        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;
        //隐藏 标题
        this.subjectVisible = false;
        //隐藏 收件人
        this.sendToVisible = false;
        //隐藏 正文
        this.textVisible = false


      } else if (type === 'weixin' && provider === 'corpMessage') {
        // 显示 收信人ID
        this.toUserVisible = true;
        // 显示 收信部门ID
        this.toPartyVisible = true;
        // 显示 按标签推送
        this.toTagVisible = true;
        // 显示 应用ID
        this.agentIdVisible = true;
        // 显示 内容
        this.messageVisible = true;

        // 隐藏 收信人ID
        this.userIdListVisible = false;
        // 隐藏 收信部门ID
        this.departmentIdListVisible = false;
        // 隐藏 全部用户
        this.toAllUserVisible = false;
        // 隐藏 模板ID
        this.ttsCodeVisible = false;
        // 隐藏 被叫显号
        this.calledShowNumbersVisible = false;
        // 隐藏 被叫号码
        this.CalledNumberVisible = false;
        // 隐藏 播放次数
        this.PlayTimesVisible = false;
        // 隐藏 模板编码
        this.codeVisible = false;
        // 隐藏 签名
        this.signNameVisible = false;
        // 隐藏 收件人
        this.phoneNumberVisible = false;
        //隐藏 标题
        this.subjectVisible = false;
        //隐藏 收件人
        this.sendToVisible = false;
        //隐藏 正文
        this.textVisible = false


      } else if (type === 'voice' && provider === 'aliyun') {

        //显示 模板ID
        this.ttsCodeVisible = true;
        // 显示 被叫显号
        this.calledShowNumbersVisible = true;
        // 显示 被叫号码
        this.CalledNumberVisible = true;
        // 显示 播放次数
        this.PlayTimesVisible = true;

        // 隐藏 应用ID
        this.agentIdVisible = false;
        // 隐藏 收信人ID
        this.userIdListVisible = false;
        // 隐藏 收信部门ID
        this.departmentIdListVisible = false;
        // 隐藏 全部用户
        this.toAllUserVisible = false;
        // 隐藏 内容
        this.messageVisible = false;
        // 隐藏 收信人ID
        this.toUserVisible = false;
        // 隐藏 收信部门ID
        this.toPartyVisible = false;
        // 隐藏 按标签推送
        this.toTagVisible = false;
        // 隐藏 模板编码
        this.codeVisible = false;
        // 隐藏 签名
        this.signNameVisible = false;
        // 隐藏 收件人
        this.phoneNumberVisible = false;
        //隐藏 标题
        this.subjectVisible = false;
        //隐藏 收件人
        this.sendToVisible = false;
        //隐藏 正文
        this.textVisible = false


      }


    },

  }
}
</script>

<style scoped lang="scss">

.editorText {
  height: 220px;
}

</style>
